<template>
  <AnalysisWrap titleText="地形开挖" info="提示:单击“矩形开挖”或“多边形开挖”按钮开始绘制开挖区域。" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">开挖深度：</span>
        <mars-input-number v-model:value="txtHeight" @change="onChangeClipHeight" :step="1" :min="-500" :max="999" addon-after="米" />
      </div>
      <div class="control-play">
        <mars-button class="btn" @click="onClickDrawExtent">添加矩形</mars-button>
        <mars-button class="btn" @click="onClickDraw">添加多边形</mars-button>
        <mars-button class="btn" danger @click="removeAll">清除</mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  mapWork.onMountedTerrainClip()
})
onUnmounted(() => {
  mapWork.onUnmountedTerrainClip()
})

const txtHeight = ref<number>(50)

// 改变切割的深度
const onChangeClipHeight = () => {
  mapWork.onChangeClipHeight(txtHeight.value)
}

// 添加矩形
const onClickDrawExtent = () => {
  mapWork.onClickDrawExtent(txtHeight.value)
}
// 添加多边形
const onClickDraw = () => {
  mapWork.onClickDraw(txtHeight.value)
}
// 清除
const removeAll = () => {
  mapWork.removeAll()
}
</script>
<style scoped lang="less">
.mars-pannel-item-label {
  width: 70px;
}

.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    width: 93px;
    font-size: 14px;
    text-align: center;
    color: rgba(234, 242, 255, 0.8);
  }
}

.control-play {
  display: flex;
  .btn {
    flex: 1;
    &:nth-child(n + 2) {
      margin-left: 4px;
    }
  }
}
</style>
